<!-- 畅游鰼国二级页面 -->
<template>
  <div class="sightseeing-tour-secondary">

    <div class="breadcrumb">
      您当前的位置：
      <span @click="toConsultation" style="color:#39ADFF; cursor:default">资讯服务 > </span>&nbsp;
      <span>旅游欣赏</span>
    </div>

    <tab :tabs="tabs" :homeImg="homeImg" :homeImgBg="homeImgBg" @tabClick="tabClick">
      <!-- 习水视频 -->
      <div v-if="videoShowNum === '0'">
        <div v-for="(item, index) in videoList" :key="item.id">
          <div class="traffic-all" v-if="index%2 === 0">
            <div class="traffic">
              <div class="right-tab-con">
                <video controls="controls"
                  width='580'
                  height='325'>
                  <source :src="item.src" type="video/mp4" />
                </video>
              </div>
              <div class="traffic-right">
                <div class="traffic-title">
                  <img :src="require('_as/c-t-1.png')" alt="">
                  <span class="title-span">{{item.title}}</span>
                </div>
                <p class="traffic-p">{{item.intro}}</p>
              </div>
            </div>
          </div>

          <div class="traffic-all"  v-if="index%2 === 1">
            <div class="traffic">
              <div class="traffic-right">
                <div class="traffic-title">
                  <img :src="require('_as/c-t-2.png')" alt="">
                  <span class="title-span">{{item.title}}</span>
                </div>
                <p class="traffic-p">{{item.intro}}</p>
              </div>
              <div class="right-tab-con">
                <video controls="controls"
                  width='580'
                  height='325'>
                  <source :src="item.src" type="video/mp4" />
                </video>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 习水音频 -->
      <div v-if="videoShowNum === '1'" class="customer">
        <div v-for="(item, index) in audioList" :key="index" class="audioUl">
          <img :class="{rotateActive: index === audioPlay}" :src="require('_as/audioBg.png')" alt="">
          <p class="marqueeStyle" v-if="index === audioPlay">
            <marquee behavior="scroll" direction="left" loop="-1">{{item.title}}</marquee>
          </p>
          <p class="marqueeStyle" v-if="index !== audioPlay">{{item.title}}</p>
          <br>
          <audio style="marginTop: 22px" controls="controls" width='200' @play="onPalyAudio(index)" @ended="onEndAudio(index)" @pause="onPauseAudio(index)">
            <source :src="item.src" type="audio/mp3" />
          </audio>
        </div>
      </div>

    </tab>

  </div>
</template>

<script>
import Tab from '_c/tab/tab'

import homeImg from '_as/homeImg.png'
import homeImgBg from '_as/homeImg_bg.png'

import scrollAnimation from '@/api/scrollAnimation.js'

export default {
  data () {
    return {
      videoList: [],
      audioList: [],
      tabs: [
        {
          tabIndex: '0',
          tabTitle: '视频影像'
        },
        {
          tabIndex: '1',
          tabTitle: '音频影像'
        }
      ],
      homeImg,
      homeImgBg,
      videoShowNum: '0',
      audioPlay: null
    }
  },
  components: {
    Tab
  },
  computed: {},
  watch: {},
  created () {
    this._getVideoListData()
    this._getAudioListData()
  },
  mounted () {
    const needScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset || 0
    scrollAnimation(needScrollTop, 0)
  },
  methods: {
    // 顶部面包屑
    toConsultation () {
      this.$router.go(-1)
    },
    // 获取audio数据
    _getAudioListData () {
      this.$http.get('/v2/movie', {
        pageSize: 10000,
        type: 0
      }).then(res => {
        this.$nextTick(() => {
          const empt = []
          res.data.forEach(item => {
            if (item.movieHtml.match(/http.*?mp3/) !== null) {
              empt.push({
                id: item.id,
                src: item.movieHtml.match(/http.*?mp3/),
                title: item.title,
                intro: item.intro,
                type: 'audio/mp3'
              })
            }
          })
          this.audioList = empt
        })
      })
    },
    // 获取video数据
    _getVideoListData () {
      this.$http.get('/v2/movie', {
        pageSize: 10000,
        type: 1
      }).then(res => {
        this.$nextTick(() => {
          const empt = []
          res.data.forEach(item => {
            if (item.movieHtml.match(/http.*?mp4/) !== null) {
              empt.push({
                id: item.id,
                title: item.title,
                intro: item.intro,
                src: item.movieHtml.match(/http.*?mp4/),
                type: 'video/mp4'
              })
            }
          })
          console.log(empt)
          this.videoList = empt
        })
      })
    },
    tabClick (item) {
      this.videoShowNum = item.tabIndex
    },
    onPalyAudio (index) {
      // alert(222)
      this.audioPlay = index
    },
    onEndAudio () {
      // alert(123)
      this.audioPlay = null
    },
    onPauseAudio () {
      this.audioPlay = null
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.breadcrumb {
  padding 20px 0 20px 15%
  display flex
  align-items center
  margin-bottom 20px
  box-shadow 0 0 10px 2px #ddd
}

.traffic-all {
  display flex
  justify-content center
  align-items center
  border-bottom 15px solid #fff
}
.traffic {
  width 1200px
  display flex
  justify-content space-between
  align-items center
  padding 10px
  background #F6F6F6
  .traffic-right {
    text-align left
    width 605px
    .traffic-title {
      margin 0 0 15px 20px
      display flex
      align-items center
      img {
        width 30px
        height 30px
        margin 0 10px 0 0
      }
      .title-span {
        font-size 30px
      }
    }
    .traffic-p {
      padding 0px 20px
      width 565px
      line-height 2
      overflow hidden
      text-overflow ellipsis
      white-space unset
      display -webkit-box
      -webkit-line-clamp 5
      -webkit-box-orient vertical
    }
    .traffic-btn {
      padding 5px 10px
      border-radius 20px
      border 1px solid #ddd
      cursor default
    }
  }
}

.right-tab-con {
  // width 780px
  // height 325px
  // line-height 325px
  border 1px solid #dddddd
}

.customer {
  margin 15px auto
  width 1200px
  display flex
  flex-wrap wrap
  .audioUl {
    width 275px
    height 307px
    border 1px solid #ddd
    margin 10px
    background #F1F3F4
    position relative
    &:hover {
      img {
        transform rotate(720deg)
      }
    }
    img {
      width 200px
      height 200px
      padding 15px 0
      transition transform 6s
    }
    .marqueeStyle {
      position absolute
      bottom 56px
      vertical-align center
      width 92%
      height 25px
      line-height 25px
      padding 0 10px
      z-index 501
      font-size 16px
    }
    audio {
      width 100%
    }
  }
}

.rotateActive {
  animation rotate 3s linear infinite
}

@keyframes rotate{
  from {
    transform: rotate(0deg)
  }
  to{
    transform: rotate(359deg)
  }
}

</style>
